<!-- 不支持多级表头、行/列合并、树、自定义表头、表自带筛选等
 范例参考：src\page\test\Table.vue http://localhost:5173/#/test/table
 -->
<template>
	<div class="table-wrap">
		<el-table @current-change="handleCurrentChange" :data="tableData" :height="tableConfig.tableProp.height" :highlight-current-row="tableConfig.tableProp.selectionType === 'radio'" :table-layout="tableConfig.tableProp.tableLayout" :border="tableConfig.tableProp.border" :stripe="tableConfig.tableProp.stripe" :style="{width: tableConfig.tableProp.width}" empty-text="无数据">
			<el-table-column :selectable="selectable" type="selection" width="55" v-if="tableConfig.tableProp.selectionType === 'multiple'" align="center"></el-table-column>
			<el-table-column width="50" v-if="tableConfig.tableProp.selectionType === 'radio'" fixed="left" align="center">
				<template #default="scope">
					<el-radio-group v-model="currentCheckedRowKey">
					    <el-radio :disabled="selectable(scope.row,scope.$index)" :value="scope.row[tableConfig.tableProp.rowKey]"></el-radio>
					</el-radio-group>
				</template>
			</el-table-column>
			<el-table-column type="index" fixed="left"></el-table-column>
			<template v-for="(item,index) in tableConfig.columns">
				<el-table-column :prop="item.prop" :label="item.label" :formatter="item.formatter" :width="item.width" :min-width="item.minWidth" :fixed="item.fixed" :sortable="item.sortable">
					<template  v-if="item.headerSoltName" #header="scope">
						<slot :name="item.headerSoltName" :label="scope.column.label" :property="scope.column.property"></slot>
					</template>
					<template  v-if="item.soltName" #default="scope">
						<slot :name="item.soltName" :row="scope.row" :val="scope.row[scope.column.property]" :index="scope.$index"></slot>
					</template>
				</el-table-column>
			</template>
			<el-table-column v-if="tableConfig.actions">
				<template #default="scope">
					<el-button v-for="(item,index) in tableConfig.actions" @click="item.click(scope.row,scope.$index)" :type="item.type?item.type:'default'">{{item.label?item.label:'按钮名字'}}</el-button>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>

<script setup>
import {ref,onBeforeMount,onMounted,computed} from 'vue'
	defineOptions({
		name: 'TableData',
		inheritAttrs: true,
	})
	const props= defineProps({
		config:{
			type: Object,
			default(){
				return {
					tableProp:{
						showIndex: true,//是否显示行序号
						selectionType: 'radio',//单选 radio，多选 multiple,空
						height: 'auto',
						width: '100%',
						stripe: true,
						border: true,
						tableLayout: 'auto',
						rowKey:'id',//行数据唯一键，例如主键id
					},
					columns:[],//列属性
					actions:[]//编辑、删除、详情、导出、启用
				}
			}
		},
		tableData: {
			type: Array,
			default: []
		},
	})
	const currentCheckedRow = ref(undefined)
	const currentCheckedRowKey = ref(undefined)
	const tableConfig = ref({})
	onBeforeMount(()=>{
		if(props.config){
			Object.assign(tableConfig.value,props.config)
		}
	})
	const handleCurrentChange = (currentRow, oldCurrentRow) =>{
		currentCheckedRow.value = currentRow
		currentCheckedRowKey.value = currentRow[tableConfig.value.tableProp.rowKey]
		// console.log('handleCurrentChange',currentRow,oldCurrentRow,currentCheckedRowKey.value);
	}
	const selectable = (row,index) =>{
		if(tableConfig.value.tableProp.selectable){
			let result = tableConfig.value.tableProp.selectable(row,index);
			if(tableConfig.value.tableProp.selectionType === 'radio'){
				result = !result
			}
			// console.log('selectable',row,index,result);
			return result
		}
		if(tableConfig.value.tableProp.selectionType === 'radio'){
			return false
		}
		return true
	}
</script>

<style>
</style>